<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/lib/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="list" style="margin: 100px 500px 100px 100px">
    <ul class="nav nav-pills nav-stacked" v-for="l1 in list" >
        <li role="presentation" class="active" style="margin-bottom: 10px">
            <a href="javascript:;">
                <span class="glyphicon glyphicon-plus spread hidden"></span>
                <span class="glyphicon glyphicon-minus fold"></span>
                <span style="margin-left: 100px">{{l1.text}}</span>
                <span style="float: right;margin: 0px 20px">
                    <button class="btn btn-default btn-sm" style="margin: 0 10px">显示</button>
                    <span class="glyphicon glyphicon-plus" style="margin: 0 10px" data-toggle="tooltip" data-placement="top" title="添加子分类"></span>
                    <span class="glyphicon glyphicon-edit" style="margin: 0 10px" data-toggle="tooltip" data-placement="top" title="修改"></span>
                    <span class="glyphicon glyphicon-trash" style="margin: 0 10px" data-toggle="tooltip" data-placement="top" title="删除"></span>
                </span>
            </a>
        </li>
        <div>
            <ul class="nav nav-pills nav-stacked" v-for="l2 in l1.arr" style="margin-left: 25px">
                <li role="presentation" style="margin-bottom: 10px">
                    <a href="javascript:;">
                        <span style="margin-left: 100px">{{l2.a}}</span>
                        <span style="float: right;margin: 0px 20px">
                            <button class="btn btn-default btn-sm" style="margin: 0 10px">显示</button>
                            <span class="glyphicon glyphicon-edit" style="margin: 0 10px" data-toggle="tooltip" data-placement="top" title="修改"></span>
                            <span class="glyphicon glyphicon-trash" style="margin: 0 10px" data-toggle="tooltip" data-placement="top" title="删除"></span>
                        </span>
                    </a>
                </li>
            </ul>
        </div>
    </ul>
</div>


<script>

    var app=new Vue({
        el:"#app1",
        data:{
            title:"app"
        }
    });
    var list=new Vue({
       el:"#list",
       data:{
           "list":[
               {
                   "text":"蔬菜种植",
                   "arr":[{"a":1},{"a":2},{"a":3}]
               },
               {
                   "text":"生态养殖",
                   "arr":[{"a":1},{"a":2},{"a":3}]
               },
               {
                   "text":"休闲旅游",
                   "arr":[{"a":1},{"a":2},{"a":3}]
               }
           ]
       }
    });

    $('[data-toggle="tooltip"]').tooltip();

    $(".fold").on("click",function (e) {
        $(this).addClass("hidden").prev().removeClass("hidden").parents("li").next().removeClass("show").addClass("hidden");
    });

    $(".spread").on("click",function (e) {
        $(this).addClass("hidden").next().removeClass("hidden").parents("li").next().removeClass("hidden").addClass("show");
    });
</script>
</body>
</html>